<template>
  <view class="content">
    <!-- 标题 -->
    <view class="tit">{{ detail.statusStr }}</view>
    <view v-if="detail.status!=1" class="subtitle">{{ detail.noUseCouponOrshopp.length != 0 ? '' : '全部使用' }}</view>
    <view v-if="detail.status==1&&timestamp!=0" class="subtitle">剩余
      <u-count-down :show-days="false" :timestamp="timestamp" bg-color="#F5F5F5" color="#999999" font-size="26"
                    separator="zh" separator-color="#999999" separator-size="26"></u-count-down>
      自动关闭
    </view>
    <view v-if="detail.status==1&&timestamp==0" class="subtitle">
      订单已自动关闭
    </view>
    <!-- 订单详情 -->
    <view class="formBox basic-info">
      <view v-if="detail.status==2" class="code-text" @click="show=true">核销码</view>
      <view class="f-c-fs">
        <view class="label">订单编号：</view>
        <view class="value">{{ detail.shoppingOrderNo }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">商品名称：</view>
        <view class="value">{{ detail.goodsName }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">使用方式：</view>
        <view class="value">{{ detail.useTypeStr }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">购买数量：</view>
        <view class="value">{{ detail.number }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">购买时间：</view>
        <view class="value">{{ detail.createOrderTime }}</view>
      </view>
      <view v-if="detail.paymentType==2" class="f-c-fs">
        <view class="label">合计积分：</view>
        <view class="value">{{ detail.amount }}</view>
      </view>
      <view v-if="detail.paymentType==1" class="f-c-fs">
        <view class="label">合计金额：</view>
        <view class="value">￥{{ detail.amount }}</view>
      </view>
    </view>
    <!-- 商品 -->
    <view v-if=" detail.noUseCouponOrshopp.length!=0" class="formBox goods-info">
      <view class="f-c-fs">
        <view class="tit">商品</view>
      </view>
      <view v-for="(item,index) in detail.noUseCouponOrshopp" class="f-c-fs">
        <view class="name">{{ item.name }}</view>
        <view class="num">X{{ item.number }}</view>
      </view>
    </view>
    <!-- 核销订单 -->
    <view v-if="detail.verificationVoList.length!=0" class="formBox order-info ">
      <view class="f-c-fs">
        <view class="name name-tit">已核销</view>
      </view>
      <view v-for="(item,index) in detail.verificationVoList" class="f-c-fs">
        <view class="name">{{ item.name }}</view>
        <view class="name">X{{ item.num }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">消费时间：</view>
        <view class="value">{{ item.writeTime }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">核销门店：</view>
        <view class="value">{{ item.storeName }}</view>
      </view>
    </view>
    <!-- 发货门店 -->
    <view v-if="detail.orderStoreInfoVo" class="formBox store">
      <view class="tit">发货门店</view>
      <view class="list">
        <view class="name">{{ detail.orderStoreInfoVo.storeName }}</view>
        <view class="address">{{ detail.orderStoreInfoVo.address }}</view>
        <view class="f-c-sb">
          <view class="f-c-fs">
            <view class="item item-l">
              <view class="item-t">{{ detail.orderStoreInfoVo.distance }}km</view>
              <view class="item-b">距离</view>
            </view>
          </view>
          <view class="f-c-fe">
            <view class="item item-r">
              <image class="logo" mode="widthFix" :src="imagePath+'glxcx/phone.png'"
                     @click="tell(detail.orderStoreInfoVo.phome)"></image>
            </view>
            <view class="item item-r">
              <image class="logo-add" mode="widthFix" :src="imagePath+'glxcx/address.png'"
                     @click="goAddress(detail.orderStoreInfoVo.lon,detail.orderStoreInfoVo.lat)"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="detail.status!=3&&detail.status!=4" class="formBox store">
      <view class="tit">适用门店</view>
      <view v-for="(item,index) in detail.storeDtoList" class="list">
        <view class="name">{{ item.storeName }}</view>
        <view class="address">{{ item.address }}</view>
        <view class="f-c-sb">
          <view class="f-c-fs">
            <view class="item item-l">
              <view class="item-t">{{ item.distance }}km</view>
              <view class="item-b">距离</view>
            </view>
            <view class="item item-l">
              <view class="item-t">{{ item.counselorNum }}人</view>
              <view class="item-b">服务顾问</view>
            </view>
          </view>
          <view class="f-c-fe">
            <view class="item item-r">
              <image class="logo" mode="widthFix" :src="imagePath+'glxcx/phone.png'"
                     @click="tell(item.phome)"></image>
            </view>
            <view class="item item-r">
              <image class="logo-add" mode="widthFix" :src="imagePath+'glxcx/address.png'"
                     @click="goAddress(item.lon,item.lat)"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-modal v-model="show" title="核销码">
      <view class="slot-content f-c-c">
        <image :src="path" mode="" style="width: 200rpx;height: 200rpx;margin: 40rpx 0;"></image>
      </view>
    </u-modal>
    <view v-if="detail.status==6" class="formBox basic-info">
      <view class="f-c-fs">
        <view class="label">取消时间 ：</view>
        <view class="value">{{ detail.cancelTime }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">取消原因 ：</view>
        <view class="value">{{ detail.cancelRemark }}</view>
      </view>
    </view>
    <l-painter
        css="width:200rpx;height:200rpx;"
        custom-style="position: fixed; left: 200%"
        isCanvasToTempFilePath
        @success="path = $event"
    >
      <l-painter-qrcode :text="detail.verificationCode" css="width: 200rpx; height: 200rpx"/>
    </l-painter>
  </view>
</template>

<script>
import {customerShoppingDetail} from '@/api/index';

export default {
  data() {
    return {
	  imagePath:this.$imagePath,
      orderNo: '',
      type: '',
      detail: {},
      path: '',
      show: false,
      timestamp: 0
    };
  },

  onLoad(option) {
    this.orderNo = JSON.parse(option.param).orderNo;
    this.type = JSON.parse(option.param).type;
    this.init();
  },
  methods: {
    tell(phone) {
      uni.makePhoneCall({
        phoneNumber: phone //仅为示例
      });
    },
    goAddress(longitude, latitude) {
      console.log(longitude, latitude)
      uni.openLocation({
        latitude: Number(latitude),
        longitude: Number(longitude),
        success: function () {
          console.log('success');
        }
      });
    },
    init() {
      this.getseckillDetail();

    },
    getseckillDetail() {
      var data = {
        shoppingOrderNo: this.orderNo,
        lon: this.$get('location')[0],
        lat: this.$get('location')[1]
      };
      customerShoppingDetail(data).then(res => {
        this.detail = res.data;
        this.timestamp = (+new Date(this.detail.createOrderTime) + 1800000 - +new Date()) / 1000
      });
    },

  }
};
</script>

<style lang="less">
.content {
  padding: 20rpx 0;
  background: #F5F5F5;

  .tit {
    width: 702rpx;
    margin: auto;
    font-size: 32rpx;
    font-weight: bold;
    color: #177fff;
  }

  .subtitle {
    width: 702rpx;
    margin: auto;
    padding: 8rpx 0 10rpx;
    font-size: 26rpx;
    color: #999999;
  }

  .goods-info {
    padding: 26rpx 26rpx 18rpx;
    font-size: 26rpx;
    font-weight: bold;
    color: #333;
    border-radius: 18px;

    .f-c-fs {
      padding-bottom: 12rpx;

      .tit {
        color: #333;
      }

      .name, .num {
        width: 50%;
      }

      .num {
        font-weight: 400;
      }
    }
  }

  .order-info {
    padding: 26rpx 26rpx 18rpx;
    font-size: 26rpx;
    font-weight: bold;
    border-radius: 18px;

    .f-c-fs {
      padding-bottom: 12rpx;

      .name {
        width: 50%;
        color: #333333;
        padding: 0 0 12rpx;
      }

      .name-tit {
        font-size: 28rpx;
      }
    }
  }

  .store {
    border-radius: 18px;
    padding-left: 26rpx;
    padding-right: 26rpx;
    color: #333333;

    .tit {
      padding: 40rpx 0 0;
      font-size: 28rpx;
      font-weight: bold;
    }

    .list {
      border-bottom: 1px solid #EDEDED;
      padding: 20rpx 0;

      .name {
        font-size: 26rpx;
        font-weight: bold;
        margin-bottom: 16rpx;
      }

      .address {
        font-size: 24rpx;
        font-weight: bold;
        color: #999999;
        line-height: 35rpx;
      }

      .item-l {
        margin-right: 70rpx;
      }

      .item-r {
        margin-left: 70rpx;
      }

      .item {
        padding: 0;
        text-align: center;

        .item-t {
          font-size: 26rpx;
          font-weight: bold;
          color: #333333;
          line-height: 80rpx;
        }

        .item-b {
          font-size: 22rpx;
          font-weight: bold;
          color: #999999;
        }

        .logo {
          width: 28rpx;
        }

        .logo-add {
          width: 35rpx;
        }
      }
    }

    .list:last-child {
      border: none;
    }
  }

  .basic-info {
    border-radius: 18px;
    padding: 30rpx 26rpx 0;
    position: relative;

    .code-text {
      position: absolute;
      right: 26rpx;
      top: 26rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #177fff;
    }

    .value {
      font-weight: bold;
      font-size: 28rpx;
      flex: 1;
      text-align: left;
      padding-left: 20rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .label {
      font-size: 28rpx;
    }

    .f-c-fs {
      padding-bottom: 30rpx;
    }

    // .f-c-fs:last-child{
    // 	border: none;
    // 	padding-bottom: 15rpx;
    // }
  }
}
</style>
